<template>
  <el-dialog
    custom-class="repair-record-tabs"
    v-el-drag-dialog="{ drag: true, full: false, resize: false }"
    :close-on-click-modal="false"
    :visible="true"
    @close="closeMd"
    title="车辆维修保养记录查询"
    :width="'80%'">
    <el-tabs v-model="activeName" @tab-click="changeTabs">
      <el-tab-pane label="预约记录" name="applyRecord">
        <ApplyRecordList ref="applyRecordRef" :myData="myData" />
      </el-tab-pane>
      <el-tab-pane label="维修记录" name="repairRecord">
        <RepairRecordList ref="repairRecordRef" :myData="myData" />
      </el-tab-pane>
    </el-tabs>

    <!-- <div v-if="activeName == 'dateRecord'">
      <el-row style="margin: 10px 0">
        <el-col :span="6">
          <span style="font-size: 12px; margin-right: 10px">开始时间</span>
          <el-date-picker
            type="date"
            placeholder="开始时间"
            v-model="ps.stime">
          </el-date-picker>
        </el-col>
        <el-col :span="6">
          <span style="font-size: 12px; margin-right: 10px">结束时间</span>
          <el-date-picker
            type="date"
            placeholder="结束时间"
            v-model="ps.etime">
          </el-date-picker>
        </el-col>
        <el-col :span="6">
          <el-select :placeholder="'维修类型'" v-model="ps.repairTypeId">
            <el-option :label="'一保'" :value="'DIESEL'"></el-option>
            <el-option :label="'二保'" :value="'GASOLINE'"></el-option>
            <el-option :label="'维修 '" :value="'CNGLNG'"></el-option>
            <el-option :label="'其他'" :value="'NEWENERGY'"></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-button
            type="primary"
            style="margin-right: 10px"
            @click="handleSearch">
            查询
          </el-button>

          <el-button 
            type="primary" 
            @click="handleCancle">
            取消预约
          </el-button>
        </el-col>
      </el-row>

      <el-table 
        :data="dateList" 
        @select="selRow" 
        style="width: 100%">
        <el-table-column
          type="selection"
          width="40"
          prop="id"
          align="center"
          :resizable="false">
        </el-table-column>

        <el-table-column prop="date" label="开始时间" width="180"></el-table-column>
        <el-table-column prop="name" label="结束时间" width="180"></el-table-column>
        <el-table-column prop="name" label="修理厂" width="180"></el-table-column>
        <el-table-column prop="address" label="联系电话"> </el-table-column>
        <el-table-column prop="address" label="备注(内容)"> </el-table-column>
      </el-table>
    </div>

    <div v-if="activeName == 'repairRecord'">
      <el-table 
        :data="repairList" 
        style="width: 100%">
        <el-table-column prop="date" label="维修时间" width="180"></el-table-column>
        <el-table-column prop="name" label="公里数" width="180"></el-table-column>
        <el-table-column prop="name" label="修理厂" width="180"></el-table-column>
        <el-table-column prop="name" label="联系电话" width="180"></el-table-column>
        <el-table-column prop="address" label="备注(维修项目)"></el-table-column>
      </el-table>
    </div> -->

  </el-dialog>
</template>

<script>
// import DataGridResize from "@/views/mixins/DataGridResize";
import elDragDialog from "@/directive/el-drag-dialog";
// import Pagination from "@/components/Pagination";
// import {
//   applyRepairDowns,
//   cancelApplyRepair,
// } from "@/api/services/logistics.service";

import ApplyRecordList from './apply-record-list';
import RepairRecordList from './repair-record-list';

export default {
  name: "RepairRecordTabs",
  // mixins: [DataGridResize],
  directives: { elDragDialog },
  components: { ApplyRecordList, RepairRecordList },
  props: {myData: Object},
  data() {
    return {
      // 默认选中：预约记录
      activeName: "applyRecord",


      // ps: {
      //   stime: "",
      //   etime: "",
      //   repairTypeId: "",
      // },
      // dg: {
      //   // 数据列表参数
      //   tbName: "repairRecordTb",
      //   loading: true,
      //   selRows: [], // 所选行数组
      //   total: 0,
      //   list: [],
      //   // 展开的行keys数组
      //   rowExpands: [],
      // },
      // // 预约
      // dateList: [],
      // // 维修
      // repairList: [],
      // selRows: null,
    };
  },

  created() {
    // this.getDgList();
    // this.getRepairList();
  },
  methods: {
    closeMd() {
      // 关闭弹框
      this.$emit("myClick", {state: false});
    },

    // tab的改变事件
    changeTabs(e){
      // 重新渲染列表的布局
      this.$refs[e.name+'Ref'].doLayout(this.$refs[e.name+'Ref'].dg.tbName);
    }

    // /**
    //  * 选中行
    //  * @param selection 选中的所有行
    //  * @param row       当前被点击的行
    //  */
    // selRow(selection, row) {
    //   this.selRows = selection;
    // },
    // // 搜索
    // handleSearch() {
    //   this.ps.stime = moment(this.ps.stime).format("YYYY-MM-DD");
    //   this.ps.etime = moment(this.ps.etime).format("YYYY-MM-DD");
    //   console.log(this.ps, "asdas");
    //   this.getDgList();
    // },
    // handleCancle() {
    //   const len = this.selRows.length;
    //   if (len != 1) {
    //     this.U.qerror("请至少选择一条数据");
    //     return;
    //   }
    //   cancelApplyRepair({ applyId: "" }).then((res) => {
    //     console.log(res, "reessss");
    //   });
    // },

    // // 预约记录列表
    // getDgList() {
    //   applyRepairDowns({
    //     applyType: "",
    //     page: 1,
    //     plateNum: this.data.plateNum,
    //     repairTypeId: this.ps.repairTypeId,
    //     rows: 9999,
    //     searchType: 0,
    //     stime: this.ps.stime,
    //     etime: this.ps.etime,
    //   }).then((res) => {
    //     if (res.code == 1) {
    //       this.dateList = res.data;
    //     } else {
    //       console.log(res.msg);
    //     }
    //   });
    // },
    // // 维修记录
    // getRepairList() {
    //   applyRepairDowns({
    //     applyType: "",
    //     page: 1,
    //     plateNum: this.data.plateNum,
    //     repairTypeId: "",
    //     rows: 9999,
    //     searchType: 1,
    //     stime: "",
    //     etime: "",
    //   }).then((res) => {
    //     if (res.code == 1) {
    //       this.repairList = res.data;
    //     } else { }
    //   });
    // },
  },
};
</script>